<template>
  <!-- “课程大纲”主页面，对应的步骤条是"创建课程大纲" -->
  <div class="app-container">
    <!-- 提供[添加章节]按钮 -->
    <el-button type="primary" @click="showChapterDialog">添加章节</el-button>

    <!-- 提供章节列表 -->
    <!--
        后端要响应回来一个chapterList集合，其中每个chapter章节对象的属性要包含：id、title、List<Video> children
        而children属性封装的每个video对象，又包含以下这几个属性id、title、videoSourceId、free
        chapter：
            id
            title
            List<Video> children： 课时集合
                video：
                  id
                  title
                  videoSourceId
                  free
    -->
    <ul class="chapterList">
      <li
        v-for="chapter in chapterList"
        :key="chapter.id">
        <p>
          {{ chapter.title }}
          <span class="acts">
            <el-button type="text" @click="addVideo(chapter.id)">添加课时</el-button>
            <el-button type="text" @click="showUpdateChapterDialog(chapter.id)">编辑</el-button>
            <el-button type="text" @click="removeChapterById(chapter)">删除</el-button>
          </span>
        </p>
        <ul/>
        <!-- 视频 -->
        <ul class="chapterList videoList">
          <li
            v-for="video in chapter.children"
            :key="video.id">
            <p>
              {{ video.title }}
              <el-tag v-if="!video.videoSourceId" size="mini" type="danger">
                {{ '尚未上传视频' }}
              </el-tag>
              <span class="acts">
                <el-tag v-if="video.free" size="mini" type="success">{{ '免费观看' }}</el-tag>
                <el-button type="text" @click="showUpdateVideoDialog(video.id)">编辑</el-button>
                <el-button type="text" @click="removeVideoById(video)">删除</el-button>
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>

    <!-- 使用添加章节对话框组件 -->
    <chapter-form ref="chapterDialog" />

    <!-- 使用添加课时对话框组件 -->
    <video-form ref="videoDialog" />

    <!-- 提供页面[上一步]、[下一步]按钮 -->
    <div style="text-align:center">
      <el-button type="primary" @click="prev()">上一步</el-button>
      <el-button type="primary" @click="next()">下一步</el-button>
    </div>
  </div>
</template>

<script>
// 引入章节对话框组件，作为Chapter的子组件，点击添加章节按钮时显示对话框
import ChapterForm from '@/views/course/components/Chapter/Form'
// 引入course.js，进行章节的CRUD
import courseApi from '@/api/course'
// 引入课时对话框组件，作为Chapter的子组件，点击添加课时按钮时显示对话框
import VideoForm from '@/views/course/components/Video/Form'
// 引入video.js，进行课时的删除
import videoApi from '@/api/video'
export default {
  // 注册子组件
  components: {
    ChapterForm, VideoForm
  },
  data() {
    return {
      chapterList: []// 用来收集章节、课时嵌套集合
    }
  },
  created() {
    this.getChapterNestedList()
  },
  methods: {
    // [上一步]按钮的单击响应事件
    prev() {
      // this.$parent拿到父组件的vue对象，然后调用vue对象中的data属性里面的active值，为其赋值
      // 当点击[上一步]按钮，跳转到 “课程信息”页面，对应的步骤条是"填写课程基本信息" ，也就是active = 0
      this.$parent.active = 0
    },

    // [下一步]按钮的单击响应事件
    next() {
      // this.$parent拿到父组件的vue对象，然后调用vue对象中的data属性里面的active值，为其赋值
      // 当点击[下一步]按钮，跳转到“课程发布”页面，对应的步骤条是"发布课程"，也就是active = 2
      this.$parent.active = 2
    },
    // [添加章节]按钮的单击响应事件
    showChapterDialog() {
      // 当点击[添加章节]按钮，打开[添加章节]对话框
      this.$refs.chapterDialog.open()
    },
    // 查询单个课程对应的所有章节及课时的嵌套集合
    getChapterNestedList() {
    // 从父组件中取出courseId，当作参数，传给后端
      courseApi.chapterNestedList(this.$parent.courseId)
        .then(response => {
        // 将查询到的章节及课时的嵌套集合，赋值给当前Vue对象中的chapterList，进行渲染到div容器中
          this.chapterList = response.data.items
        })
    },
    // 根据id删除章节
    removeChapterById(chapter) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 首先先判断章节下面是否有课时，有课时则让先删了课时再删章节
        if (chapter.children.length > 0) {
          this.$message.warning('请先删除章节的课时')
          // return表示终结此函数，不让执行下面代码
          return
        }
        courseApi.deleteChapater(chapter.id).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 删除成功后，刷新章节列表
          this.getChapterNestedList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 根据id更新章节，[编辑]按钮的单击响应事件
    showUpdateChapterDialog(chapterId) {
      // 当点击[编辑]按钮，打开[更新章节]对话框[编辑和新增共用一个对话框]
      // 弹出对话框的同时，回显当前章节的信息，也就是根据id查询当前章节信息[在Chapter/Form.vue页面编写方法，因为对话框是在Form.vue显示的]
      this.$refs.chapterDialog.getChapter(chapterId)
    },
    // 课时函数一：[添加课时]按钮的单击响应事件
    addVideo(chapterId) {
      // （1）当点击[添加课时]按钮时，弹出课时页面[Video/Form.vue]对话框
      this.$refs.videoDialog.open()
      // 只需要打开对话框即可，用户是在对话框页面[也就是Video/Form.vue页面进行课时的添加，提交也是该页面提交]
      // （2）让对话框的标题，变成"添加课时"
      this.$refs.videoDialog.title = '添加课时'
      // （3）将点击章节按钮所在的章节id设置给即将新增的课时对象
      this.$refs.videoDialog.video.chapterId = chapterId
      /**
       * 当点击编辑框，数据会回显到对话框中
       * 而[添加课时]按钮使用open()打开按钮的时候，
       * 也会回显数据[点击完[编辑]完，再点[添加课时]就会回显]
       * 所以，还得再[添加课时]的单击事件，对数据进行清空【2020-2-14注，情人节，孤独敲码，李必赋】
       * ------------------------------------------------------------------------------------
       * 但是这又会出现一个问题，把video数据清空，点击[添加课时]时，就拿不到chapterId
       * 请求到后端时，会报错
       * DataIntegrityViolationException【数据完整性违规异常】
       * Cause: java.sql.SQLException: Field 'chapter_id' doesn't have a default value
       */
      // this.$refs.videoDialog.video = {
      //   sort: 0,
      //   free: 0
      // }
      // this.$refs.videoDialog.fileList = []
      this.$refs.videoDialog.video.title = ''
      this.$refs.videoDialog.video.sort = 0
      this.$refs.videoDialog.video.free = 0
      this.$refs.videoDialog.fileList = []
      // 暂时的解决办法，不把整个video清空，只清空对话框显示的数据
    },
    // 课时函数二：课时列表中的[删除]按钮单击响应事件，直接在主页面[Chapter/index.vue页面删除]
    removeVideoById(video) {
      this.$confirm(`此操作将永久删除${video.title}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        videoApi.deleteVideo(video.id).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 删除成功后，刷新章节列表
          this.getChapterNestedList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 课时函数三：课时列表中的[编辑]按钮单击响应事件
    showUpdateVideoDialog(videoId) {
      // 点击按钮时，调用Video/From.vue中的方法getVideo(videoId)，进行数据回显
      this.$refs.videoDialog.getVideo(videoId)
    }
  }
}
</script>
<style>
/* 章节列表的样式 */
.chapterList{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.chapterList li{
  position: relative;
}
.chapterList p{
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #DDD;
}
.chapterList .acts {
    float: right;
    font-size: 14px;
}

.videoList{
  padding-left: 50px;
}
.videoList p{
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dashed #DDD;
}
</style>
